<template>
  <div class="migration-section">
    <h2>单表数据迁移设置</h2>
    <el-form label-width="140px">
      <el-form-item label="选择表名">
        <el-select v-model="selectedTable" placeholder="请选择表" filterable style="width: 100%">
          <el-option v-for="table in tableList" :key="table" :label="table.Name + ' - ' + table.Description" :value="table.Name" />
        </el-select>
      </el-form-item>
      <el-form-item label="是否覆盖">
        <el-switch v-model="migrationSettings.removeField" active-text="是" inactive-text="否" />
      </el-form-item>
      <el-form-item label="输出操作日志">
        <el-switch v-model="migrationSettings.showLogs" active-text="是" inactive-text="否" />
        <div class="hint">如需查看详细SQL操作记录请打开</div>
      </el-form-item>
      <el-form-item label="是否删除多余字段">
        <el-switch v-model="migrationSettings.isDeleteRedundant" active-text="是" inactive-text="否" />
        <div class="hint">如果目标表中存在源表没有的字段，是否删除这些字段</div>
      </el-form-item>
    </el-form>
    <div class="migration-controls">
      <el-button type="primary" @click="startMigration" :disabled="isMigrating || !isConfigValid">开始迁移</el-button>
    </div>
    <div v-if="migrationResult" class="migration-result">
      <!-- 可根据需要展示迁移结果 -->
    </div>
  </div>
</template>

<script setup>
import { ref, reactive, computed, watch } from "vue";
import { ElMessage } from "element-plus";
import migrationApi from "../api/migrationApi";

const props = defineProps({
  tableList: Array,
  isConfigValid: Boolean,
});
const emit = defineEmits(["latest-sql-log"]);

const selectedTable = ref("");
const migrationSettings = reactive({
  removeField: false,
  isDeleteRedundant: false,
  showLogs: false,
});
const isMigrating = ref(false);
const migrationResult = ref(null);

watch(
  () => props.tableList,
  (newList) => {
    // if (newList && newList.length > 0 && !selectedTable.value) {
    //   selectedTable.value = newList[0].Name;
    // }
  },
  { immediate: true }
);

async function startMigration() {
  if (!props.isConfigValid) {
    ElMessage.warning("请先配置数据库连接");
    return;
  }
  isMigrating.value = true;
  migrationResult.value = null;
  try {
    const response = await migrationApi.startMigration({
      tableName: selectedTable.value,
      removeField: migrationSettings.removeField,
      isDeleteRedundant: migrationSettings.isDeleteRedundant,
      showLogs: migrationSettings.showLogs,
    });
    if (response.data) {
      migrationResult.value = response.data;
      isMigrating.value = false;
      if (migrationSettings.showLogs && response.data.targetChangedSqls) {
        const logs = JSON.parse(localStorage.getItem("migration_sql_logs") || "[]");
        const logObj = {
          timestamp: Date.now(),
          tableName: selectedTable.value,
          sqls: response.data.targetChangedSqls,
        };
        logs.unshift(logObj);
        if (logs.length > 50) logs.length = 50;
        localStorage.setItem("migration_sql_logs", JSON.stringify(logs));
        emit("latest-sql-log", logObj);
      }
    }
  } catch (error) {
    ElMessage.error(`迁移失败: ${error.message}`);
    isMigrating.value = false;
  }
}
</script>

<style scoped>
.config-section h2,
.migration-section h2 {
  color: #2c3e50;
  border-bottom: 2px solid #3498db;
  padding-bottom: 10px;
  margin-bottom: 20px;
}

.migration-section {
  margin-top: 30px;
}

.migration-controls {
  background-color: #f8f9fa;
  padding: 20px;
  border-radius: 6px;
  border: 1px solid #eaeaea;
}
.hint {
  font-size: 12px;
  color: #7f8c8d;
  margin-top: 5px;
}
.migration-result {
  margin-top: 20px;
  padding: 20px;
  background-color: #f8f9fa;
  border-radius: 6px;
  border: 1px solid #eaeaea;
}
</style>
